<template>
    <div class="chart" ref="chart" style="width:400px;height:376px"></div>
</template>

<script>
export default {
data() {
    return {
    }
},
methods:{
    getEchart(){
        const chart = this.$refs.chart
        if (chart) {
          const myChart = this.$echarts.init(chart)
          const option = {
            title: {
    text: '能耗监测',
    textStyle: {
    color: '#ffffff'
 }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    textStyle: {
            fontSize: 12,
            color: '#FFFFFF',
          },
  },
  toolbox: {
    show: false,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  axisLabel: {
    name:"星期",
      show: true,
      textStyle: {
    color: '#ffffff',
  }
    }
  },
  yAxis: {
    name:"(kw-h)/t",
    type: 'value',
    max: 150,
    axisLabel: {
      formatter: '{value} ',
      textStyle: {
    color: '#ffffff',
  }
    },
    
  },
  series: [
    {
      name: '电',
      type: 'line',
      data: [60, 43, 88, 135, 127, 106, 37],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
    //   markLine: {
    //     data: [{ type: 'average', name: 'Avg' }]
    //   }
    },
    {
      name: '水',
      type: 'line',
      data: [40, 76, 96, 78, 67, 75, 20],
      markPoint: {
        data: [{ name: '水', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        
        ]
      }
    }
  ]
        }

          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })



        }
    }
},
mounted(){
    this.getEchart()
}
}
</script>

<style>
    .chart{
        background: rgb(19, 18, 18);
        opacity: 0.8;
        color: #fff;
  /* background: red; */

    }
</style>